<template>
  <div id="da">
    <van-nav-bar
      title="订单明细"
      left-arrow
      @click-left="onClickLeft"
    />
    <div id="container"></div>
    <div>
      <span class="span">订单编号：{{ orderList.orderId }}</span>
      <span class="span">到达时间：{{ orderList.endTime }}</span>
      <span class="span">出发点：{{ orderList.startingPoint }}</span>
      <s-pan class="span">目的地：{{ orderList.terminal }}</s-pan>
    </div>
    <div id="touk">
      <div id="pic">
        <img src="../../assets/1111.jpeg" height="1080" width="1080"/>
      </div>
      <div id="name">
        <h3>{{ orderList.riderName }}</h3>
      </div>
      <div id="money">
        <h1>￥{{ orderList.endMoney }}</h1>
      </div>
    </div>
    <div>
      <van-rate
        v-model="value"
        :size="25"
        color="#ee0a24"
        void-icon="star"
        void-color="#eee"
        @click="start"
      />
      <div class="criteria-section">
        <button @click="feedbackType='文明礼貌'" v-model="feedbackType" value="文明礼貌" class="criterion-button" :style="{ backgroundColor: feedbackType === '文明礼貌'? '#4e9eb6' : 'initial' }">文明礼貌</button>
        <button @click="feedbackType='爱护车辆'" v-model="feedbackType" value="爱护车辆" class="criterion-button" :style="{ backgroundColor: feedbackType === '爱护车辆'? '#4e9eb6' : 'initial' }">爱护车辆</button>
        <button @click="feedbackType='沟通顺畅'" v-model="feedbackType" value="沟通顺畅" class="criterion-button" :style="{ backgroundColor: feedbackType === '沟通顺畅'? '#4e9eb6' : 'initial' }">沟通顺畅</button>
        <button @click="feedbackType='守时'" v-model="feedbackType" value="守时" class="criterion-button" :style="{ backgroundColor: feedbackType === '守时'? '#4e9eb6' : 'initial' }">守时</button>
        <button @click="feedbackType='爱安静'" v-model="feedbackType" value="爱安静" class="criterion-button" :style="{ backgroundColor: feedbackType === '爱安静'? '#4e9eb6' : 'initial' }">爱安静</button>
        <button @click="feedbackType='爱聊天'" v-model="feedbackType" value="爱聊天" class="criterion-button" :style="{ backgroundColor: feedbackType === '爱聊天'? '#4e9eb6' : 'initial' }">爱聊天</button>
      </div>
      <div class = "action-section">
        <button class = "action-button" @click="showMessage">评价</button>
        <button class = "action-button" @click="showDialog()">修改评价</button>
        <button class = "action-button" @click="complain(orderList.orderId)">投诉</button>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="提示" :before-close="handleClose">
      <span>是否要修改评价</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmModify">确定</el-button>
      </span>
    </el-dialog>
    </div>

</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";
import {Dialog} from "vant";
window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: "23a30393a855e07d2ba7621ac8e4e6d2",
};
export default {
  name: "finishOrders",
  data(){
    return{
      value: [1,2,3,4,5],
      dialogVisible:false,
      // 地图实例
      map: null,
      toolbar: null,
      // 标记点
      marker: "",
      // 地址逆解析
      geoCoder: null,
      // 搜索提示
      AutoComplete: null,
      //缩放控件
      ToolBar:null,
      //地图放大镜
      HawkEye:null,
      // 搜索关键字
      keywords: "",
      // 位置信息
      form: {
        lng: "116.208741",
        lat: "40.136902",
        address:'',
      },
      // 搜索节流阀
      loading: false,
      // 搜索提示信息
      options: [],
      trackPositions: [],
      //精准定位
      Geolocation() {},

      driverTime: null,
      driverLong: null,
      startaddress:"",
      endaddress:"",
      // 开始的经纬度
      startLatitudeAndLongitude: "116.379028, 39.865042",
      // 结束的经纬度
      endLatitudeAndLongitude: "116.427281, 39.803719",
      orderId: '',
      orderList: [],
      stars: [0, 0, 0, 0, 0],
      criteria: ['文明礼貌', '爱护车辆', '沟通顺畅', '守时', '爱安静', '爱聊天'],
      feedbackType:'',
     }
  },
  created(){
    this.orderId = this.$route.params.orderId
    console.log(this.orderId)
    this.findOne()

  },
  methods: {
    start() {
      console.log(this.value)
    },
    showDialog() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      // 这里可以添加关闭对话框前的一些处理逻辑，如果不需要特殊处理直接调用done即可
      done();
    },
    confirmModify() {
      // 这里编写点击确定后真正执行修改评价的业务逻辑，比如发送请求等
      this.dialogVisible = false;
      this.feedbackType=''
    },
    pingjia(){
      console.log(row+'^^^^^^^^^^^^^^^^')
      console.log(this.feedbackType)
    },
    rate(num) {
      for (let i = 0; i < this.stars.length; i++) {
        if (i < num) {
          this.stars[i] = 1;
        } else {
          this.stars[i] = 0;
        }
      }
    },
    showMessage() {
      this.orderList.drivervaluation=this.feedbackType;
      axios.post(`personal/queue/update?id=${this.orderList.id}&&drivervaluation=${this.orderList.drivervaluation}`,).then(res => {
        if (res.data.data==="成功"){
          alert("反馈成功")
        }
        this.feedbackType=[];
      })
    },
    complain(orderId) {
      this.$router.push({name:"feedback",params:{orderId:orderId}});
      console.log(orderId+'*********')
    },
    findOne() {
      axios.get(`personal/queue/findOne?orderId=${this.orderId}`).then(res => {
        this.orderList = res.data
        this.value = this.orderList.star
        console.log(res)
        console.log('1k1k1k1k1j2nh')
      })
    },
    onClickLeft() {
      this.$router.push('/dcOrders')
    },
    async getMapApi() {

      if (this.trackPositions && this.trackPositions.length) {
        // 通过 高德 API获取 all 所有 路线 经纬度


        //构造路线导航类
        var driving = new AMap.Driving({
          map: this.map,
          panel: "panel"
        });

        var lngsrt = this.trackPositions[0];
        // 根据起终点经纬度规划驾车导航路线
        driving.search(
          new AMap.LngLat(this.trackPositions[0][0],this.trackPositions[0][1]),
          new AMap.LngLat(this.trackPositions[1][0],this.trackPositions[1][1]),
          function(status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考
            // https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === 'complete') {
              // this.map.setFitView();
              console.log('绘制驾车路线完成')
            } else {
              console.log('获取驾车数据失败：' + result)
            }
          })
      }
    },

    reset(){
      this.keywords = '';
      this.form = {
        lng: "116.208741",
        lat: "40.136902",
        address: '',
      }
      // 清除点
      this.removeMarker();
      // 标记点
      this.setMapMarker();
    },



    initMap() {
      let that = this;
      // that.trackPositions.push([this.form.lng, this.form.lat]);
      AMapLoader.load({
        // 你申请的Key
        key: "b17513b156700f5d461409278e81ffa7",
        version: "2.0",
        // 需要用到的插件
        plugins: ["AMap.Geocoder",
          "AMap.AutoComplete","" +
          "AMap.ToolBar",
          "AMap.HawkEye",
          "AMap.Geolocation",
          "AMap.Driving"
        ],
      }).then((AMap) => {

        that.map = new AMap.Map("container", {
          viewMode: "3D", //是否为3D地图模式
          zoom: 23, //初始化地图级别
          center: [that.form.lng, that.form.lat], //初始化地图中心点位置
        });
        //地址逆解析插件
        that.geoCoder = new AMap.Geocoder({
          city: "北京", //城市设为北京，默认：“全国”
          radius: 1000, //范围，默认：500
        });
        // 搜索提示插件
        that.AutoComplete = new AMap.AutoComplete({ city: "北京" });
        that.ToolBar =  new AMap.ToolBar({
          position: {
            bottom: '210px',
            right: '35px'
          }
        });
        that.HawkEye =  new AMap.HawkEye({
          position: {
            // bottom: '110px',
            // left: '35px'
          }
        });
        that.Geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认：true
          timeout: 10000, // 设置定位超时时间，默认：无穷大
          offset: [10, 20],  // 定位按钮的停靠位置的偏移量
          zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          position: 'RB' //  定位按钮的排放位置,  RB表示右下

        });


        that.map.addControl(that.ToolBar);
        that.map.addControl(that.HawkEye);
        that.map.addControl(that.Geolocation);

        // this.map.addControl(toolbar);
        // 清除点
        that.removeMarker();
        // 标记点
        that.setMapMarker();
        //点击获取经纬度;
        that.map.on("click", (e) => {
          // 获取经纬度
          that.form.lng = e.lnglat.lng;
          that.form.lat = e.lnglat.lat;
          // 清除点
          that.removeMarker();
          // 标记点
          that.setMapMarker();


        });
      })
        .catch((err) => {
          // 错误
        });
    },
    // 标记点
    setMapMarker() {
      // 自动适应显示想显示的范围区域
      this.map.setFitView();
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.form.lng, this.form.lat],
      });
      // 逆解析地址
      this.toGeoCoder();
      this.map.setFitView();
      this.map.add(this.marker);
    },
    // 清除点
    removeMarker() {
      if (this.marker) {
        this.map.remove(this.marker);
      }
    },
    xingc(){
      this.$router.push("/Trip")
    },
    // 逆解析地址
    toGeoCoder() {
      let lnglat = [this.form.lng, this.form.lat];
      this.geoCoder.getAddress(lnglat, (status, result) => {
        if (status === "complete") {
          this.form.address = result.regeocode.formattedAddress;
        }else {
          this.form.address = '';
        }
      });
    },
    querySearchAsync(queryString, cb){
      if (queryString) {
        this.AutoComplete.search(queryString, (status, result) => {
          if(status === 'complete'){
            this.options = result.tips;
            for (let i = 0; i < this.options.length; i++) {
              this.options[i].value = this.options[i].name;
            }
          }else {
            this.options = [];
          }
          cb(this.options);
        });
      } else {
        this.options = [];
        cb(this.options);
      }
    },
    handleSelect(val){
      // 清空时不执行后面代码
      if (!val) {
        return;
      }
      this.trackPositions = [] ;
      this.trackPositions.push([this.form.lng, this.form.lat]);
      this.form = {
        lng: val.location.lng,
        lat: val.location.lat,
      };
      this.trackPositions.push([this.form.lng,this.form.lat])
      // 清除点
      this.removeMarker();
      // 标记点
      this.setMapMarker();

      // 绘画地图
      this.getMapApi(this.trackPositions);

    },
  },
  mounted() {
    this.initMap();

  },
  unmounted() {
    this.map.destroy();
  },

};
</script>

<style scoped>

.star {
  width: 30px;
  height: 30px;
  background-image: url('../../assets/xing1.png');
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 5px;
}
.filled {
  background-image: url('../../assets/xiang2.png');
}
.criteria-section {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.criterion-button {
  width: 120px;
  background-color: #ffffff;
  color: black;
  border-color: #eff2f3;
  border-style: inset;
  padding: 10px 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
.criterion-button:hover {
  background-color: #4e9eb6;
  color: white;
}
.action-section {
  display: flex;
  margin-top: 10px;
}
.action-button {
  width: 120px;
  background-color: #4e9eb6;
  border: none;
  padding: 10px 20px;
  margin-right: 10px;
  border-radius: 20px;
  color: white;
}
#da {
  width: 100%;
  //height: 100%;
  background-color: #F3FCFF;
}
#touk {
  margin: 10px;
  width: 100%;
  height: 150px;

  #pic {
    float: left;
    width: 100px;
    height: 100px;

    img {
      width: 100px;
      height: 100px;
      border-radius: 50px;
    }
  }

  #name {
    float: left;
    width: 50%;
    height: 100px;
    margin-left: 20px;
  }

  #money {
    float: left;
    text-align: center;
    width: 100%;
    height: 60px;

    h1 {
      font-size: 30px;
      color: #FF0000;
    }
  }
}

.span {
  display: inline-block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  text-align: left;
  margin: 10px;
}

#container {
  width: 400px;
  height: 300px;
}

.shuju {
  width: 380px;
  height: 80px;
  background-color: #c8e3e3;
  margin-left: 10px;
  float: left;
}
.didian {
  width: 300px;
  height: 60px;
  background-color: #eef4ff;
}

</style>
